<template>
  <div>
    <h2>管理员列表</h2>
    <el-table :data="Adminer" height="83vh" style="width: 100%">
      <el-table-column prop="adminname" label="管理员姓名" width="180" />
      <el-table-column prop="adminid" label="管理员编号" width="300">
      </el-table-column>
      <el-table-column label="管理员权限" #default="scope">
        {{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}
      </el-table-column>
      <el-table-column label="操作">
        <el-popover
          placement="top-start"
          :width="200"
          trigger="hover"
          content="修改该管理员的权限和密码"
        >
          <template #reference>
            <el-button type="primary" :icon="Edit" circle />
          </template>
        </el-popover>

        <el-popover
          placement="top-start"
          :width="200"
          trigger="hover"
          content="删除管理员"
        >
          <template #reference>
            <el-button type="danger" :icon="Delete" circle />
          </template>
        </el-popover>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { reactive } from "vue";
import service from "../../../utils/service";

import { ref } from "vue";

const visible = ref(false);

const Adminer = reactive<myAdminer[]>([]);
//TS的语法需要规定每一个值的类型,如果不手动规定 那么他就会自动规定
interface myAdminer {
  adminname: string;
  password: string;
  role: number; //超级管理员和普通管理员 分别为1和2
  adminid: string;
  checkedKeys: string[];
}

//获取管理员列表
const getAdminer = () => {
  service({
    url: "/admin/list",
  }).then((res: any) => {
    if (res.data.code === "200") {
      Adminer.push(...res.data.data);
    }
  });
};

getAdminer();

//管理员的删除
const deleteAdmin = () => {
  service({
    url: "/admin/delete",
  });
};
</script>

<style scoped>
.el-button + .el-button {
  margin-left: 8px;
}
</style>